坑洞知識(三)

React Hook & Class Component

React 16.8 之前，function component 還沒有 useState、Hooks 的概念，
需要描述 component 的狀態時通常會使用 Class component。
但在 React 16.8 有了 Hooks 以後，就能夠在 Function component 引入 Hooks 來表示狀態，
這種寫法也成為目前主流。

而 class component 與 function component 兩者之間的差別主要在於：

• class component：關注的是這個「生命週期」要做什麼，
• function component：每一次 render，都是「重新」呼叫一次 function，並且會記住「當下」傳入的值

React Hook

優勢：
1.較接近原生的 js 寫法，對於剛開始接觸的人有好處，且不需要懂 ES6 也可以寫
2.減少了解太過多餘的元件週期，只要控制好 useEffect 即可
3.用相對簡單的寫法解決複雜問題，舉例來說 redux 提供的 useSelector 介面
4.程式碼較容易被壓縮和最佳化

須注意細節：
1.useEffect 把三個元件狀態合在一起，寫法太過簡單所以使用時要注意，如果沒有加上限制就容易造成不停的觸發
2.盡量避免在 function 中寫到 new 或是可能沒有防呆事件的 listener，因為在每次更新畫面的時候都會重做一次
3.沒有包含 getSnapshotBeforeUpdate 和 componentDidCatch 這兩個元件周期

Class Component

優勢：
1. 適合實作較複雜且有 side effect 的元件， 舉例來說優化效能時通常就會用 shouldComponentUpdate()
2. 元件有內部狀態、多種元件週期可以進行操作
3. 提供許多 lifecycle method 使用，方便管理較複雜的 component 狀態

須注意細節：
1. 生命週期規劃與資源釋放的時機要額外處理
2. 由於 this 指向的關係，state 和 props 會拿到最新的結果，但是會較不易於進行 callback 操作

這幾天分享的是我在接觸當下時吸收的一些架構與邏輯，
接下來則是繼續分享我在開發過程中發生的錯誤訊息吧。
咱們明天見~~